import {
  reqAddHospital,
  reqGetHospital,
  reqUpdateHospital,
} from "@/api/hospital/hospitalSet";
import { ReqAddHospitalParams } from "@/api/hospital/model/hospitalSetTypes";
import { Button, Form, Input, Card, message } from "antd";
import { useForm } from "antd/lib/form/Form";

import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";

function AddOrUpdateHospital() {
  //创建 form 对象
  const [form] = useForm();
  //得到跳转路由是可能会携带的医院id (添加没有, 更新有)
  const { id } = useParams();
  //初始化请求获取对应的医院信息，显示到form中
  useEffect(() => {
    async function getHospital() {
      // 只有有id时, 才会去获取医院数据显示
      if (id) {
        // 根据id, 请求得到对应的医院数据对象
        const hospital = await reqGetHospital(+id);
        // 将数据对象交给表单显示 (设置表格数据回显)
        form.setFieldsValue(hospital);
      }
    }
    getHospital();
  }, []);

  //loading标识
  const [loading, setLoading] = useState(false);
  // 得到路由导航/跳转函数
  const navigate = useNavigate();
  const onFinish = async (values: ReqAddHospitalParams) => {
    try {
      setLoading(true); //请求之前显示loading
      if (id) {
        //有id时 更新
        await reqUpdateHospital({
          ...values,
          id: +id, //params中的参数类型是string，需要转化为number
        });
      } else {
        //请求添加
        await reqAddHospital(values);
      }
      setLoading(false); //请求成功后隐藏loading
      message.success(`${id ? "更新" : "添加"}医院成功`); //提示成功的消息弹窗
      //添加成功后跳转到医院设置路由
      navigate("/syt/hospital/hospitalSet", { replace: true });
    } catch (error) {
      setLoading(false);
    }
  };
  return (
    <Card>
      <Form
        form={form}
        onFinish={onFinish}
        labelCol={{ span: 2 }}
        wrapperCol={{ span: 22 }}
        autoComplete="off"
      >
        <Form.Item
          label="医院名称"
          name="hosname"
          rules={[{ required: true, message: "请输入医院名称!" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="医院编号"
          name="hoscode"
          rules={[{ required: true, message: "请输入医院编号!" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="api基础路径"
          name="apiUrl"
          rules={[{ required: true, message: "请输入api基础路径!" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="联系人姓名"
          name="contactsName"
          rules={[{ required: true, message: "联系人姓名不能为空!" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="联系人手机"
          name="contactsPhone"
          rules={[
            { required: true, message: "联系人手机号不能为空!" },
            {
              pattern: /^1[3-9][0-9]{9}$/,
              message: "请输入合法的手机号",
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 2, span: 22 }}>
          <Button type="primary" htmlType="submit" loading={loading}>
            保存
          </Button>
          <Button
            type="default"
            className="ml"
            onClick={() => {
              navigate("/syt/hospital/hospitalSet", { replace: true });
              // navigate(-1);
            }}
          >
            返回
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
}

export default AddOrUpdateHospital;
